<template>
  <div :class="[
      'numberBlock-container',
      {
        'no-style': !value,
      },
    ]">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'NumberBlock',
  props: {
    value: {
      type: [Number, String],
      default: 0
    }
  }
}
</script>

<style scoped>
.numberBlock-container {
  /*宽、高、边框、背景、圆角*/
  width: 60px;
  height: 60px;
  border: 1px solid #abcdef;
  background-color: aliceblue;
  border-radius: 5px;
  /*弹性布局*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*字体大小、字体粗细*/
  font-size: 30px;
  font-weight: bold;
}
.no-style {
  border-color: transparent;
  background-color: transparent;
  color: transparent;
  cursor:not-allowed;
}
</style>
